<template>
    <div class="bodybody">
        <!-- <divider class="m_top50">验证手机</divider>
        <group class="box">
        <x-input name="username" placeholder="请输入您的真实姓名" is-type="china-name"></x-input>
        </group>
        <group class="box">
        <x-input placeholder="请输入您的常用手机号" mask="999 9999 9999" v-model="maskValue" :max="13" is-type="china-mobile"></x-input>
        </group>
        <group class="box">
        <x-input placeholder="请输入验证码" class="weui-vcode">
            <x-button slot="right" type="primary" mini>发送验证码</x-button>
        </x-input>
        </group>
        <div style="width:70%;margin:auto;padding:15px;text-align:left;">
            <check-icon :value.sync="demo1"></check-icon>我同意
            <span style="color:#1D62F0;" @click="showDialog()">《XXX注册授权协议》</span>
        </div>
        <button class="weui-btn weui-btn_primary" style="width:70%;" @click="next()">下一步</button>
        <div v-transfer-dom>
            <x-dialog v-model="showBox" class="dialog-demo">
                <p class="dialog-title">授权协议</p>
                <div class="img-box" style="padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
                    <p style="padding:10px;">
                        本授权协议（以下简称“本协议”）是腾讯创业服务平台（以下简称“平台”或“腾讯”）、财付通支付科技有限公司（以下简称“财付通”）与用户（以下或称为“您”）就使用财付通支付服务所涉及的授权事宜在深圳市南山区所订立的协议。您通过网络页面点击确认或以其他方式选择接受本协议，即表示您与平台、财付通已达成协议并同意接受本协议的全部约定内容。
                        您应认真阅读、充分理解本规则各条款，特别是其中与您的权益有或可能具有重大关系的条款，及对平台、财付通具有或可能具有免责或限制责任的条款（尤其是粗体字部分）。如您不同意接受本协议的任意内容，或者无法准确理解相关条款含义的，请不要进行后续操作。如果您对本协议的条款有疑问的，请拨打客服电话（财付通：95017 ）进行询问，客服将向您解释条款内容。
                        为了更好地为您提供财付通支付服务，就您已经支付到财付通备付金账户的待结算资金，您认可并授权平台有权代您向财付通提交支付指令，将您的待结算资金从财付通备付金账户划转至商户银行账户，如因平台指令错误，由此产生的一切纠纷及法律责任由您及平台承担，与财付通无关。
                        您同意，平台或财付通有权随时对本协议内容进行单方面的变更，并在平台网站页面通知您。若您在本协议内容变更生效后继续使用本服务的，表示您已充分阅读、理解并接受变更修改后的协议内容，也将遵循变更修改后的协议内容；若您不同意变更修改后的协议内容，您应立即停止使用本服务。
                        双方在履行本协议的过程中，如发生争议，应协商解决。协商不成的，任何一方均可向本协议签订地有管辖权的人民法院提起诉讼。
                    </p>
                </div>
                <div>
                    <span class="vux-close" @click="hideDialog()"></span>
                </div>
            </x-dialog>
        </div> -->
         <x-button type="primary" style="width:70%;position:fixed;bottom:20px;margin:auto;left: 50%;margin-left: -126px;" @click.native="next()">立即申请</x-button>
    </div>
</template>

<script>
import { Divider } from "vux";
import {
  XInput,
  Group,
  XButton,
  Cell,
  CheckIcon,
  XDialog,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  directives: {
    TransferDom
  },
  components: {
    Divider,
    XInput,
    XButton,
    Group,
    Cell,
    CheckIcon,
    XDialog
  },
  data() {
    return {
      demo1: false,
      showBox: false
    };
  },
  methods: {
    showDialog() {
      this.showBox = true;
    },
    hideDialog() {
      this.showBox = false;
    },
    next() {
      window.location.href = "#/operator";
    }
  },
  mounted() {
    document.title = "极速征信";
  }
};
</script>
<style lang="less" scoped>
.weui-dialog {
  width: 85% !important;
  height: 90%;
}
.dialog-demo {
  .weui-dialog {
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    padding-top: 10px;
    font-size: 20px;
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
.vux-close {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #999;
  width: 24px;
  height: 24px;
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 24px;
    height: 1px;
    background-color: currentColor;
    transform: rotate(-45deg);
  }
  &:after {
    transform: rotate(45deg);
  }
}

.bodybody {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  background-image: url(../../image/timg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.box {
  width: 70%;
  text-align: center;
  margin: auto;
}
.weui-cell {
  border: 1px solid #ddd;
  border-radius: 6px !important;
}
.m_top50 {
  margin-top: 50px;
}
</style>
